<template>
    <div class="box">
        <header>
            <!-- <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" /> -->
            <NavBar title="购物车" />
        </header>
        <div class="content">
            <!-- {{ cartList }} -->
            <van-empty image="error" description="购物车空空如也" v-if="cartList.length == 0" />
            <van-swipe-cell v-else v-for="item in cartList" :key="item.id">
                <van-card :num="item.count" :price="`${item.price}.00`" :title="item.title" class="goods-card"
                    :thumb="item.image">
                    <template #footer>
                        <van-stepper v-model="item.count" min="1" max="5" />
                    </template>
                    <!-- 使用<van-card>中的自定义内容--插槽-->
                    <template #tag>
                        <van-checkbox v-model="item.checked"></van-checkbox>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item.id)" />
                </template>
            </van-swipe-cell>
        </div>
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="$router.push('/order')"
            :disabled="orderList.length == 0">
            <van-checkbox v-model="allCheck">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import NavBar from '@/components/NavBar.vue'
export default {
    components: {
        NavBar
    },
    computed: {
        ...mapState(['cartList']),
        ...mapGetters(['totalPrice', 'orderList']),
        allCheck: {
            get() {
                // 全选按钮是否被勾上
                if (this.cartList.length === 0) {
                    return false
                } else {
                    return this.cartList.every(item => item.checked)
                }
            },
            set(value) {
                // 全选按钮被选中之后要设置什么？  要遍历cartList，把每个item的checked设置为value
                this.changeCheck(value)
                // state.cartList.forEach(item => item.checked = value)
            }
        }
    },
    methods: {
        ...mapMutations(['changeCheck', 'deleteCart']),
        deleteItem(id) {
            this.deleteCart(id)
        }
    }

}
</script>
<style lang="scss" scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.van-swipe-cell:last-child {
    margin-bottom: 60px;
}

.van-swipe-cell {
    margin-bottom: 8px;
}
</style>